<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display: flex">
        <div>
          <span>我的作品</span>
        </div>
        <div style="cursor: pointer;display: flex;margin-left: 1020px;margin-top: 2px" @click="dialogFormVisible=true">
          <i class="el-icon-circle-plus" style="margin-top: 2px;color: blueviolet"></i>
          <el-button style="float: right; padding: 3px 0" type="text">新建作品</el-button>
        </div>
      </div>
      <div v-for="item in myBooks" :key="item.id" class="text item" style="display: flex">
        <div class="left">
          <img :src="item.cover" style="width: 100px;height: 120px">
        </div>
        <div class="right">
          <div style="font-size: 20px;font-weight: 600">{{item.title}}</div>
          <div style="margin-top: 15px"><span style="color: #8c939d">作品简介:{{item.abs}}</span></div>
          <div style="display: flex;margin-top: 40px">
            <template v-if="item.collectors">
              <div style="color: #8c939d;margin-top: 5px">收藏数 {{item.collectors.split(',').length}}</div>
              <div><el-button style="padding: 8px 12px;margin-left: 900px" type="primary" @click="routeToBook(item.id)">去写作</el-button></div>
            </template>
            <template v-else>
              <div style="color: #8c939d;margin-top: 5px">收藏数 0</div>
              <div><el-button style="padding: 8px 12px;margin-left: 900px" type="primary" @click="routeToBook(item.id)">去写作</el-button></div>
            </template>
          </div>
        </div>
      </div>
      <el-dialog title="新建作品" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="作品名:" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="作品类型:" :label-width="formLabelWidth">
            <el-select v-model="form.category_id" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作品简介:" :label-width="formLabelWidth">
            <el-input v-model="form.text" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="createNovel">创建作品</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import router from "@/router";


export default {
  name: "Create",
  // components:{
  //   quillEditor
  // },
  data(){
    return{
      myBooks: [],
      dialogFormVisible:false,
      options:[],
      form: {
        title: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        text: '',
        category_id:''
      },
      formLabelWidth: '80px',
      content:'',
      editorOption:[],
    }
  },
  mounted: function () {
    this.loadText();
    this.getMyBooks();
  },
  methods: {
    loadText(){
      console.log(this.$route.params)
      this.$axios.get('/getArticleById?id='+this.$route.params.id,).then(resp => {
        if (resp) {
          this.articles = resp.data
        }
      })
      this.$axios.get('/getCategoryId',).then(resp => {
        if (resp) {
          console.log(resp.data)
          for(let i=0;i<resp.data.length;i++){
            this.options.push({label:resp.data[i].name,value:resp.data[i].id})
          }
        }
      })
    },
    createNovel(){
      var currentDate = new Date();

// 获取年、月、日
      var year = currentDate.getFullYear();
      var month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月从0开始计数，所以需要+1
      var day = currentDate.getDate().toString().padStart(2, '0');

// 生成 "YYYY-MM-DD" 格式的日期字符串
      var formattedDate = year + '-' + month + '-' + day;
      this.$axios.post('/setNewBook',{
        category_id:this.form.category_id,
        title:this.form.title,
        author:window.localStorage.getItem('author'),
        date:formattedDate,
        abs:this.form.text,
      }).then(resp => {
        if (resp) {
          this.$message({
            message: '创建成功',
            type: 'success'
          });
          this.dialogFormVisible = false;
        }
      })
    },
    getMyBooks(){
      this.$axios.get('/getBooksByAuthor?author='+window.localStorage.getItem('author'),).then(resp => {
        if (resp) {
          this.myBooks = resp.data;
        }
      })
    },
    routeToBook(id){
      router.push(`/authorIndex/create/book/${id}`)
    }
  }
}
</script>
<style>
.right{
  margin-left: 30px;
}
.title {
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}
:deep(.el-card){
  width: 100% !important;
}
.box-card{
  width: 100% !important;
}
.count>span{
  padding: 5px;
  color: #99a9bf;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>